<template>
	<view class="container">
		<!-- navBar区域 -->
		<view class="navBar">
			<!-- logo -->
			<view class="logo">
				<image class="logo-icon" src="/static/image/logo.png"></image>
			</view>
			<!-- 搜索区域 -->
			<view class="search-box">
				<view class="search">
					<image class="search-icon" src="/static/image/search.png"></image>
					<input class="search-input" type="text" placeholder="搜索商品名称" />
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper class="lunbo-image" :autoplay="true" :interval="3000" :circular="true" indicator-dots>
			<swiper-item class="image-item" v-for="item in lunboData" :key="item.id">
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>

		<!-- 更多区域 -->
		<view>
			<uni-grid :column="4" class="more-area">
				<uni-grid-item class="more-area-box">
					<image class="img" src="/static/image/digital3C.png"></image>
					<view class="text">数码电器</view>
				</uni-grid-item>
				<uni-grid-item class="more-area-box">
					<image class="img" src="/static/image/information.png"></image>
					<view class="text">选购资讯</view>
				</uni-grid-item>
				<uni-grid-item class="more-area-box">
					<image class="img" src="/static/image/menu.png" @click="goCategoryPage"></image>
					<view class="text" @click="goCategoryPage">分类商品</view>
				</uni-grid-item>
				<uni-grid-item class="more-area-box">
					<image class="img" src="/static/image/more.png"></image>
					<view class="text">查看更多</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 为你推荐 -->
		<view class="divider-with-text">
			<view class="divider-line"></view>
			<text class="divider-text">为你推荐</text>
			<view class="divider-line"></view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<!-- 商品项 -->
			<view class="goods-item" v-for="item in goodsData" :key="item.id" @click="subPagesDetail(item.id)">
				<!-- 商品图片 -->
				<image class="goods-img" :src="item.img_url"></image>
				<!-- 商品标题区域 -->
				<view class="goods-title-area">
					<!-- 商品标题 -->
					<view class="goods-title">{{ item.title }}</view>
					<!-- 商品标题区域底部 -->
					<view class="goods-foot">
						<!-- 商品价格 -->
						<view class="goods-price">￥{{ item.sell_price }}</view>
						<!-- 商品销售量 -->
						<view class="goods-sales">{{ item.buy }}人购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app' 
	import http from '../../api/request'
	import { getGoodsList, getlunboData } from '/api/index'
	import { navigateTo } from '../../utils/navigate'
	
	// 定义响应式数据
	const loading = ref(false)
	const lunboData = ref([])
	const goodsData = ref([])

	// 获取商品列表
	const fetchGoodsList = async () => {
		loading.value = true
		const res = await getGoodsList()
	}
	
	// 获取商品轮播图
	const fetchLunboData = async () => {
		loading.value = true
		const res = await getlunboData()
	}
	
	// 跳转到分类页
	const goCategoryPage = () => {
		uni.switchTab({
			url: '/pages/index/category'
		})
	}
	
	// 跳转到详情页面(分包)
	const subPagesDetail = (id) => navigateTo(`/subPages/goodsDetail?id=${id}`)

	// 页面生命周期
	onLoad(() => {
		fetchGoodsList()
		fetchLunboData()
	})
</script>

<style lang="scss">
	// 页面设置
	.container {
		width: 100vw;
		height: 100vh;
		// navBar区域
		.navBar {
			position:fixed;
			height: px2rpx(53);
			display: flex;
			// logo设置
			.logo {
				.logo-icon {
					opacity: 0.5;
					width: px2rpx(55);
					height: px2rpx(54);
				}
			}
			// 搜索框设置
			.search-box {
				display: flex;
				align-items: center;
				// background: linear-gradient(to right, #bcdee9 ,#9ad2e6);
				background: linear-gradient(to right, #fff07d, #ff0000);
				width: px2rpx(331);
				height: px2rpx(54);
				// 搜索框区域
				.search {
					display: flex;
					// 搜索框图片
					.search-icon {
						width: px2rpx(24);
						height: px2rpx(24);
					}
					// 搜索输入框
					.search-input {
						padding-left: 8px;
						width: px2rpx(267);
						background-color: rgba(221, 227, 233, 0.3);
					}
				}
			}
		}
		// 轮播图设置
		.lunbo-image {
			padding-top: px2rpx(53);
			height: px2rpx(220);
			background-color: #ededed;
			image {
				width: px2rpx(375);
			}
		}
		// 更多区域
		.more-area {
			display: flex;
			// 更多区域盒子
			.more-area-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: px2rpx(94);
				height: px2rpx(85);
				// 更多区域图片
				.img {
					width: px2rpx(39);
					height: px2rpx(39);
				}
			}
		}
		// 分隔线区域
		.divider-with-text {
			background-color: #e7e7e7;
			display: flex;
			align-items: center;
			// 分隔线
			.divider-line {
				flex: 1;
				height: px2rpx(0.5);
				background-color: #b3b3b3;
			}
			// 分隔线文本
			.divider-text {
				padding: px2rpx(20) px2rpx(10);
				color: #999;
				font-size: px2rpx(14);
			}
		}
		// 商品列表
		.goods-list {
			display: grid;
			place-items: center;
			grid-template-columns: repeat(2, 1fr);
			background-color: #e7e7e7;
			// 商品项
			.goods-item {
				display: flex;
				flex-direction:column;
				justify-content: space-between;
				margin: px2rpx(5) 0;
				background-color: white;
				width: px2rpx(170);
				height: px2rpx(264);
				// 商品图片
				.goods-img {
					width: px2rpx(170);
					height: px2rpx(174);
				}
				// 商品标题区域
				.goods-title-area {
					width: px2rpx(170);
					height: px2rpx(58);
					// 商品标题
					.goods-title {
						// 隐藏溢出内容
						overflow: hidden;
						// 禁止换行
						white-space: nowrap;
						// 显示省略号
						text-overflow: ellipsis; 
						width: px2rpx(166);
						height: px2rpx(22);
					}
					// 商品底部区域
					.goods-foot {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: px2rpx(166);
						height: px2rpx(42);
						// 商品价格
						.goods-price {
							color: #f50;
							padding: px2rpx(10) 0;
							width: px2rpx(43);
							height: px2rpx(14);
						}
						// 商品销售量
						.goods-sales {
							font-size: px2rpx(12);
							width: px2rpx(65);
							height: px2rpx(12);
						}
					}
				}
			}
			
		}
	}
</style>